<template>
    <q-table
    class="my-table"
    :rows="data"
    :columns="cols"
    :rows-per-page-options="[5]"
    wrap-cells
  >
  <template v-slot:body-cell="props">
      <q-td :props="props">
        {{ props.value }}
      </q-td>
    </template>
    </q-table>

</template>

<script setup lang="ts">
import { partVersionList } from 'src/services/partVersopmService';
import { PartVersion } from 'src/services/type';
import { formatDateTimeString } from 'src/utils/dateUtils';
import { ref } from 'vue';

const props = defineProps<{
    part_id : number
    mode: 'software' | 'hardware'
}>()


const data = ref<PartVersion[]>([]);

const align = 'left';

const cols = [
    {
    name: 'stock_code',
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
    align,
  },
  {
    name: 'serial_no',
    label: 'Serial No',
    field: 'serial_no',
    sortable: true,
    align,
  },
  {
    name: 'update',
    label: 'Latest Update',
    field: row=>formatDateTimeString(row.update),
    sortable: true,
    align,
  },
  {
    name: 'version',
    label: 'Version',
    field: (row)=>{
        if(props.mode=='software'){
            return row.sw_ver
        }return row.hw_ver
    },
    sortable: true,
    align,
  },
];

async function init() {
  const res = await partVersionList(props.part_id);
  if (res.data) {

    data.value = res.data
    /* if (props.mode == 'software') {
    data.value.push(res.data[0]); */
  }
 /*  if (props.mode == 'hardware') {
    data.value.push(res.data[0]);
      }
  } */
}
init();
</script>